در این مطلب میخوام سایتی رو بهتون معرفی کنم که از نظر طراحی و گریدبندی بسیار زیبا و خلاقانه هست و میتونین با اسکرول صفحه به سمت پایین انیمیشنهای مختلف رو ببینید و لذت ببرید. از گریدبندی و نحوه نمایش المنتهای اون میتونین ایده بگیرید و در سایت و طراحیای خودتون اعمال کنید.

برای شروع وارد سایت details بشین.

امیدوارم بدردتون بخوره.

موفق باشید.

یا علی

@import url(http://fonts.googleapis.com/css?family=Martel+Sans:200,300,400,800,900);

*,

*:before,

*:after {

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: border-box;

}

body {

font-family: sans-serif;

background-color: #000;

}

section {

height: 350px;

width: 94%;

box-shadow: 0px 0px 146px 21px rgba(0, 0, 0, 0.75);

background-color: #000;

background-repeat: no-repeat;

background-size: cover;

background-position: center center;

position: relative;

overflow: hidden;

width: 100%;

margin: 0 auto 0px;

}

section a {

text-transform: uppercase;

text-align: center;

text-decoration: none;

font-size: 4.875em;

font-weight: 900;

color: #fff;

}

section a:after, section a:before {

content: '';

}

section.head {

background-color: #fff;

position: relative;

z-index: 10;

}

section.head a {

width: 652px;

height: 78px;

line-height: 78px;

position: absolute;

top: 50%;

left: 50%;

margin-left: -326px;

margin-top: -39px;

font-weight: 200;

color: #BABABA;

-webkit-transition: all 2s cubic-bezier(0.21, 1, 0.84, 1.01);

-moz-transition: all 2s cubic-bezier(0.21, 1, 0.84, 1.01);

transition: all 2s cubic-bezier(0.21, 1, 0.84, 1.01);

}

section.head a:before, section.head a:after {

color: #000;

font-weight: 900;

font-size: 30px;

text-transform: none;

display: block;

-webkit-transition: inherit;

-moz-transition: inherit;

transition: inherit;

}

section.head a:before {

content: attr(data-bf);

position: absolute;

top: -45px;

left: -5px;

}

section.head a:after {

content: attr(data-af);

position: absolute;

right: 0;

bottom: -30px;

}

section.head a:hover {

-webkit-transform: scale(1.05);

-moz-transform: scale(1.05);

-ms-transform: scale(1.05);

-o-transform: scale(1.05);

transform: scale(1.05);

}

section.head a:hover:before {

-webkit-transform: scale(1.2) translate(-25px, -15px);

-moz-transform: scale(1.2) translate(-25px, -15px);

-ms-transform: scale(1.2) translate(-25px, -15px);

-o-transform: scale(1.2) translate(-25px, -15px);

transform: scale(1.2) translate(-25px, -15px);

}

section.head a:hover:after {

-webkit-transform: scale(1.2) translate(25px, 15px);

-moz-transform: scale(1.2) translate(25px, 15px);

-ms-transform: scale(1.2) translate(25px, 15px);

-o-transform: scale(1.2) translate(25px, 15px);

transform: scale(1.2) translate(25px, 15px);

}

در این مطلب میخوام سایتی رو بهتون معرفی کنم که در اون فرآیندی که خودشون بر روی آیکونهای SVG اعمال میکنن رو توضیح داده و میتونین از اون استفاده کنید و تجربتون بیشتر بشه. در این آموزش بصورت مرحله به مرحله، فرآیند آماده سازی آیکونها برای استفاده در سایت قرار داده شده و خیلی میتونه کمکتون کنه.

برای شروع وارد سایت our-svg-icon-process بشین.

امیدوارم بدردتون بخوره.

موفق باشید.

یا علی

در جلسه سی و یکم دوره آموزش فریم ورک فاندیشن می پرداریم به پیاده سازی بخش پایانی پروژه نهایی این دوره و آنچه را که آموختیم رو در قالب یک پروژه کاملا کاربردی پیاده سازی خواهیم کرد

در این جلسه می پردازیم به :

استفاده از پلاگین joyride برای ایجاد تور قالب

کدنویسی پلاگین کاربردی اسکرول به بالای صفحه توسط جاوااسکریپت و انیمیشن های css

جمع بندی و توصیه ها

توضیحات : امروزه با توجه به پیشرفت سریع تکنولوژی ,مبحث طراحی رسپانسیو و یا به عبارتی واکنشگرا در زمینه وب جز یکی از موارد اجتناب ناپذیر برای طراحان وب می باشد که در کنار چندین فاکتور اساسی و پایه ای دیگر، از مواردی به شمار می رود که نیاز است قبل از هر چیز و شروع پروژه توجه ویژه ای به آن شود و به عنوان یکی از ارکان اصلی پیاده سازی سایت های اینترنتی در بخش UI (رابط کاربری) و همچنین UX (تجربه کاربری) مد نظر قرار گیرد و توجه ویژه ای به آن شود چرا که عدم توجه به آن می تواند منجر به شکست و زیان دهی پروژه گردد. طبق آمار تا پایان سال ۲۰۱۵ بیش از ۹۱ درصد از مردم دنیا دارایی تلفن همراه هستند و و ۶۰ درصد از این جامعه آماری دارای تلفن های هوشمند در مدل های مختلف هستند و از آن برای اتصال به اینترنت و وبگردی استفاده می کنند حال با توجه به طیف وسیعی از کاربرانی که دارای تلفن های هوشمند در ابعاد و اندازه های مختلف هستند طراحان وب ملزم به طراحی UI و رعایت اصول استاندارد UX در طرح های خود می باشند تا کاربران هدف شان که درصد بالایی در جامعه آماری ذکر شده را تشکیل می دهند بتوانند با هر دستگاهی و در هر اندازه ای به راحتی و بدون دردسر و به هم ریختگی در ظاهر و قالب یک سایت آن را مشاهد و مورد کاوش قرار دهند و تجربه لذت بخشی از وبگردی در سایت مورد نظرشان داشته باشند. از این رو و برای راحتی و سرعت بخشیدن به این نوع طراحی (طراحی واکنشگرا) در کنار رعایت استاندارهای لازم، سالانه فریم ورک های مختلفی در این زمینه طراحی و تولید می شوند و به رقابت با سایر رقبای خود در این زمینه می پردازند. به همین دلیل بر آن شدیم تا یکی از فریم ورک های فوق العاده قدرتمند و با سابقه و محبوب در بین طراحان حرفه ای را به صورت اصولی و از پایه تا پیشرفته در قالب مثال های مختلف و متنوع آموزش دهیم. در پایان نیز با کدنویسی 0 تا 100 یک پروژه کاملا حرفه ای و مدرن، به صورت عملی و کاربردی از این فریمورک حرفه ای استفاده خواهیم کرد. لازم به ذکر است که قالب کنونی وب سایت سون لرن هم بر پایه فریم ورک فاندیشن پیاده سازی و طراحی شده است. در این دوره آخرین نسخه فریمورک فاندیشن (نسخه 6) تدریس خواهد شد و شما به روزترین آموزش این فریمورک را در وب فارسی خواهید داشت. امیدواریم این دوره نیز مورد توجه و استقبال علاقمندان قرار گرفته و مفید واقع گردد...

<html>

<head>

<title>Highcharts Tutorial</title>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<script src="http://code.highcharts.com/highcharts.js"></script>

<script src="http://code.highcharts.com/highcharts-3d.js"></script>

</head>

<body>

<div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div>

<script language="JavaScript">

$(document).ready(function() {

var chart = {

type: 'pie',

options3d: {

enabled: true,

alpha: 45,

beta: 0

}

};

var title = {

text: 'Browser market shares at a specific website, 2014'

};

var tooltip = {

pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'

};

var plotOptions = {

pie: {

allowPointSelect: true,

cursor: 'pointer',

depth: 35,

dataLabels: {

enabled: true,

format: '{point.name}'

}

}

};

var series = [{

type: 'pie',

name: 'Browser share',

data: [

['Firefox', 45.0],

['IE', 26.8], {

name: 'Chrome',

y: 12.8,

sliced: true,

selected: true

},

['Safari', 8.5],

['Opera', 6.2],

['Others', 0.7]

]

}];

var json = {};

json.chart = chart;

json.title = title;

json.tooltip = tooltip;

json.plotOptions = plotOptions;

json.series = series;

$('#container').highcharts(json);

});

</script>

</body>

</html>

در این مطلب میخوام سایتی رو بهتون معرفی کنم که در اون یک رابط کاربری برای پیش نمایش سایت در موبایل با استفاده ازCSS و Javascript ساخته میشه و میتونین از اون استفاده کنید. فرض کنید که شما یک سایت دارید که میخاید اون رو در ظاهر گوشی های مورد نظرتون در سایت دیگه ای قرار بدین. برای اینکار از iframe استفاده میکنیم. حالا میتونیم این iframe رو در این رابط کاربری قرار بدین و پیش نمایش موبایل رو به کاربران نمایش بدین. چند دستگاه مختلف وحود داره که میتونین از هر کدوم خواستید استفاده کنید. کدهای مربوط به این ابزار در پایین صفحه مورد نظر قرار داده شده و میتونین از اون استفاده کنید.

برای شروع وارد سایت preview-tool بشین.

امیدوارم بدردتون بخوره.

موفق باشید.

یا علی

*,

*:before,

*:after {

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: border-box;

}

section {

font-family: 'Open Sans', sans-serif;

height: 350px;

position: relative;

background-clip: fixed;

background-repeat: no-repeat;

background-size: cover;

background-position: center center;

overflow: hidden;

width: 94%;

margin: 0 auto 30px;

}

section a {

text-transform: uppercase;

font-weight: 800;

text-align: center;

text-decoration: none;

color: #fff;

display: block;

font-size: 4.875em;

}

section.p2 {

background-image: url(3.jpg);

}

section.p2 a {

width: 216px;

height: 94px;

line-height: 94px;

position: absolute;

top: 50%;

left: 50%;

margin-left: -108px;

margin-top: -47px;

-webkit-transition: all 0.5s ease-out;

-moz-transition: all 0.5s ease-out;

-ms-transition: all 0.5s ease-out;

-o-transition: all 0.5s ease-out;

transition: all 0.5s ease-out;

color: transparent;

}

section.p2 a:after,

section.p2 a:before {

-webkit-transition: inherit;

-moz-transition: inherit;

-ms-transition: inherit;

-o-transition: inherit;

transition: inherit;

position: absolute;

left: 0;

right: 0;

top: 0;

bottom: 0;

content: attr(data-cont);

color: #fff;

}

section.p2 a:before {

-webkit-clip-path: polygon(0 0, 0 100%, 12.5% 100%, 12.5% 0, 25% 0, 25% 100%, 37.5% 100%, 37.5% 0, 50% 0, 50% 100%, 62.5% 100%, 62.5% 0, 75% 0, 75% 100%, 87.5% 100%, 87.5% 0);

clip-path: polygon(0 0, 0 100%, 12.5% 100%, 12.5% 0, 25% 0, 25% 100%, 37.5% 100%, 37.5% 0, 50% 0, 50% 100%, 62.5% 100%, 62.5% 0, 75% 0, 75% 100%, 87.5% 100%, 87.5% 0);

}

section.p2 a:after {

-webkit-clip-path: polygon(12.5% 0, 12.5% 100%, 25% 100%, 25% 0, 37.5% 0, 37.5% 100%, 50% 100%, 50% 0, 62.5% 0, 62.5% 100%, 75% 100%, 75% 0, 87.5% 0, 87.5% 100%, 100% 100%, 100% 0);

clip-path: polygon(12.5% 0, 12.5% 100%, 25% 100%, 25% 0, 37.5% 0, 37.5% 100%, 50% 100%, 50% 0, 62.5% 0, 62.5% 100%, 75% 100%, 75% 0, 87.5% 0, 87.5% 100%, 100% 100%, 100% 0);

}

section.p2 a:hover {

color: #fff;

}

section.p2 a:hover:before {

-webkit-transform: translate(0, -100%);

-moz-transform: translate(0, -100%);

-ms-transform: translate(0, -100%);

-o-transform: translate(0, -100%);

transform: translate(0, -100%);

color: transparent;

}

section.p2 a:hover:after {

-webkit-transform: translate(0, 100%);

-moz-transform: translate(0, 100%);

-ms-transform: translate(0, 100%);

-o-transform: translate(0, 100%);

transform: translate(0, 100%);

color: transparent;

}

مدرسه استانداردهای وب برگزار میکند

گردهمایی 2 روزه توسعه دهندگان وب ایران در تیرماه

با همکاری موسسه طراحان و ایده پردازان آرتیمان و حمایت سازمان فناوری اطلاعات وزارت ارتباطات و ستاد توسعه فرهنگ علم، فناوری و اقتصاد دانش بنیان معاونت علمی و فناوری ریاست جمهوری، نخستین همایش توسعه دهندگان وب به مدت 2 روز، برای طراحان و توسعهدهندگان JavaScript و css برگزار خواهد شد.

به گزارش روابط عمومی مدرسه استانداردهای وب، کارگاههای جانبی این همایش جهت آموزش کامل برخی از موضوعات در تاریخ 30 و 31 تیر 95 برگزار می شود و تمامی شرکتکنندگان حضوری، میتوانند در کارگاه مورد نظر خود شرکت کنند.

همچنین بخش سخنرانیهای این رویداد نیز به صورت آنلاین پوشش داده خواهد شد تا افرادی که امکان حضور در همایش را ندارند، بتوانند از سخنرانیها استفاده کنند.

آشنایی با تکنیکها، کتابخانهها و فریم ورکهای جدید، شرکت در کارگاههای آموزشی وبرقراری ارتباط و شبکهسازی با سایر متخصصین این حوزه از اهداف این همایش ذکر شده است .

گفتنی است مدرسه استانداردهای وب، با هدف استاندارد سازی این بستر، فعالیت خود را از سال 1392 آغاز کرد و در این مدت با برگزاری همایش ها، کارگاه ها و گردهمایی های متعدد تلاش دارد تا به اهداف تعیین شده خود برسد؛ این مدرسه با برگزاری کارگاه ها و همایش های تخصصی و فنی به آموزش دست اندرکاران حوزه فناوری اطلاعات و ارتباطات کمک خواهد کرد. این مجموعه قصد دارد تا تمامی اقشار جامعه بتوانند از این رویداد 2روزه بهره مند شوند به همین منظور در جهت حمایت از دانشجویان، دانش آموزان و همچنین مددجویان بهزیستی، تخفیفات ویژه ای برای این عزیزان در نظر گرفته شده که با مراجعه به وب سایت همایش اطلاعات تکمیلی در این زمینه دریافت می شود.

:: وبسایت سون لرن به عنوان حامی رسانه ای، شما را به ثبت نام سریعتر در این همایش دعوت می نماید .

در جلسه سی ام دوره آموزش فریم ورک فاندیشن می پرداریم به پیاده سازی بخش نهم پروژه نهایی این دوره و آنچه را که آموختیم رو در قالب یک پروژه کاملا کاربردی پیاده سازی خواهیم کرد در این جلسه می پردازیم به : طراحی بخش فوتر معرفی و نحوه استفاده از پلاگین news ticker ...

توضیحات : امروزه با توجه به پیشرفت سریع تکنولوژی ,مبحث طراحی رسپانسیو و یا به عبارتی واکنشگرا در زمینه وب جز یکی از موارد اجتناب ناپذیر برای طراحان وب می باشد که در کنار چندین فاکتور اساسی و پایه ای دیگر، از مواردی به شمار می رود که نیاز است قبل از هر چیز و شروع پروژه توجه ویژه ای به آن شود و به عنوان یکی از ارکان اصلی پیاده سازی سایت های اینترنتی در بخش UI (رابط کاربری) و همچنین UX (تجربه کاربری) مد نظر قرار گیرد و توجه ویژه ای به آن شود چرا که عدم توجه به آن می تواند منجر به شکست و زیان دهی پروژه گردد. طبق آمار تا پایان سال ۲۰۱۵ بیش از ۹۱ درصد از مردم دنیا دارایی تلفن همراه هستند و و ۶۰ درصد از این جامعه آماری دارای تلفن های هوشمند در مدل های مختلف هستند و از آن برای اتصال به اینترنت و وبگردی استفاده می کنند حال با توجه به طیف وسیعی از کاربرانی که دارای تلفن های هوشمند در ابعاد و اندازه های مختلف هستند طراحان وب ملزم به طراحی UI و رعایت اصول استاندارد UX در طرح های خود می باشند تا کاربران هدف شان که درصد بالایی در جامعه آماری ذکر شده را تشکیل می دهند بتوانند با هر دستگاهی و در هر اندازه ای به راحتی و بدون دردسر و به هم ریختگی در ظاهر و قالب یک سایت آن را مشاهد و مورد کاوش قرار دهند و تجربه لذت بخشی از وبگردی در سایت مورد نظرشان داشته باشند. از این رو و برای راحتی و سرعت بخشیدن به این نوع طراحی (طراحی واکنشگرا) در کنار رعایت استاندارهای لازم، سالانه فریم ورک های مختلفی در این زمینه طراحی و تولید می شوند و به رقابت با سایر رقبای خود در این زمینه می پردازند. به همین دلیل بر آن شدیم تا یکی از فریم ورک های فوق العاده قدرتمند و با سابقه و محبوب در بین طراحان حرفه ای را به صورت اصولی و از پایه تا پیشرفته در قالب مثال های مختلف و متنوع آموزش دهیم. در پایان نیز با کدنویسی 0 تا 100 یک پروژه کاملا حرفه ای و مدرن، به صورت عملی و کاربردی از این فریمورک حرفه ای استفاده خواهیم کرد. لازم به ذکر است که قالب کنونی وب سایت سون لرن هم بر پایه فریم ورک فاندیشن پیاده سازی و طراحی شده است. در این دوره آخرین نسخه فریمورک فاندیشن (نسخه 6) تدریس خواهد شد و شما به روزترین آموزش این فریمورک را در وب فارسی خواهید داشت. امیدواریم این دوره نیز مورد توجه و استقبال علاقمندان قرار گرفته و مفید واقع گردد...

@import url(http://fonts.googleapis.com/css?family=Francois+One);

@import url(http://fonts.googleapis.com/css?family=PT+Sans);

@font-face {

font-family: 'Audiowide';

font-style: normal;

font-weight: 400;

src: local("Audiowide"), local("Audiowide-Regular"), url(http://themes.googleusercontent.com/static/fonts/audiowide/v2/8XtYtNKEyyZh481XVWfVOj8E0i7KZn-EPnyo3HZu7kw.woff) format("woff");

}

body {

font-size: 62.5%;

background-color: #fff;

margin: 10px;

border: 1px solid #333;

}

*,

*::before,

*::after {

box-sizing: border-box;

}

h1, h2, h3 {

font-family: 'PT Sans', sans-serif;

text-transform: uppercase;

}

h1 {

font-size: 2.4em;

background-color: #292929;

text-align: center;

padding: 20px;

margin: 0;

color: #fff;

}

h1 a {

display: block;

margin-top: 10px;

text-transform: none;

color: #aaa;

font-size: 16px;

text-decoration: none;

}

.headingOuter {

background: #f1f1f1;

text-align: center;

margin-top: 50px;

margin-bottom: 0;

padding: 10px;

border-top: 1px solid #333;

border-bottom: 1px solid #333;

font-size: 1.6em;

}

.headingOuter:first-child {

margin-top: 0;

}

h1 + .headingOuter {

margin-top: 0;

}

/* =====================================================

Some defaults across all toggle demos

===================================================== */

.toggle {

display: block;

text-align: center;

margin-top: 40px;

user-select: none;

}

.toggle--checkbox {

display: none;

}

.toggle--btn {

display: block;

margin: 0 auto;

font-size: 1.4em;

transition: all 350ms ease-in;

}

.toggle--btn:hover {

cursor: pointer;

}

.toggle--btn, .toggle--btn:before, .toggle--btn:after,

.toggle--checkbox,

.toggle--checkbox:before,

.toggle--checkbox:after,

.toggle--feature,

.toggle--feature:before,

.toggle--feature:after {

transition: all 250ms ease-in;

}

.toggle--btn:before, .toggle--btn:after,

.toggle--checkbox:before,

.toggle--checkbox:after,

.toggle--feature:before,

.toggle--feature:after {

content: '';

display: block;

}

/* =====================================================

Toggle - switch stylee

===================================================== */

.toggle--switch .toggle--btn {

position: relative;

width: 120px;

height: 44px;

font-family: 'PT Sans', Sans Serif;

text-transform: uppercase;

color: #fff;

background: linear-gradient(90deg, #a4bf4d 0%, #a4bf4d 50%, #ca5046 50%, #ca5046 200%);

background-position: -80px 0;

background-size: 200% 100%;

box-shadow: inset 0 0px 22px -8px #111;

}

.toggle--switch .toggle--btn, .toggle--switch .toggle--btn:before {

border-radius: 4px;

}

.toggle--switch .toggle--btn:before {

display: block;

position: absolute;

top: 50%;

left: 0;

transform: translateY(-50%);

width: 52px;

height: 44px;

border: 2px solid #202027;

background-image: linear-gradient(90deg, transparent 50%, rgba(255, 255, 255, 0.15) 100%);

background-color: #2b2e3a;

background-size: 5px 5px;

text-indent: -100%;

}

.toggle--switch .toggle--feature {

position: relative;

display: block;

overflow: hidden;

height: 44px;

text-shadow: 0 1px 2px #666;

}

.toggle--switch .toggle--feature:before, .toggle--switch .toggle--feature:after {

position: absolute;

top: 50%;

transform: translateY(-50%);

}

.toggle--switch .toggle--feature:before {

content: attr(data-label-on);

left: -60%;

}

.toggle--switch .toggle--feature:after {

content: attr(data-label-off);

right: 16%;

}

.toggle--switch .toggle--checkbox:checked + .toggle--btn {

background-position: 0 0;

}

.toggle--switch .toggle--checkbox:checked + .toggle--btn:before {

left: calc(100% - 52px);

}

.toggle--switch .toggle--checkbox:checked + .toggle--btn .toggle--feature:before {

left: 20%;

}

.toggle--switch .toggle--checkbox:checked + .toggle--btn .toggle--feature:after {

right: -60%;

}

<html>

<head>

<title>Highcharts Tutorial</title>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<script src="http://code.highcharts.com/highcharts.js"></script>

<script src="http://code.highcharts.com/highcharts-3d.js"></script>

</head>

<body>

<div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div>

<div id="sliders">

<table>

<tr>

<td>Alpha Angle</td>

<td>

<input id="R0" type="range" min="0" max="45" value="15" /> <span id="R0-value" class="value"></span></td>

</tr>

<tr>

<td>Beta Angle</td>

<td>

<input id="R1" type="range" min="0" max="45" value="15" /> <span id="R1-value" class="value"></span></td>

</tr>

</table>

</div>

<script language="JavaScript">

$(document).ready(function() {

var chart = {

renderTo: 'container',

type: 'column',

margin: 75,

options3d: {

enabled: true,

alpha: 15,

beta: 15,

depth: 50,

viewDistance: 25

}

};

var title = {

text: 'Chart rotation demo'

};

var subtitle = {

text: 'Test options by dragging the sliders below'

};

var plotOptions = {

column: {

depth: 25

}

};

var series = [{

data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]

}];

var json = {};

json.chart = chart;

json.title = title;

json.subtitle = subtitle;

json.series = series;

json.plotOptions = plotOptions;

var highchart = new Highcharts.Chart(json);

function showValues() {

$('#R0-value').html(highchart.options.chart.options3d.alpha);

$('#R1-value').html(highchart.options.chart.options3d.beta);

}

// Activate the sliders

$('#R0').on('change', function() {

highchart.options.chart.options3d.alpha = this.value;

showValues();

highchart.redraw(false);

});

$('#R1').on('change', function() {

highchart.options.chart.options3d.beta = this.value;

showValues();

highchart.redraw(false);

});

showValues();

});

</script>

</body>

</html>

به نام خدا. همیشه پیش میاد که بیخوایم یکسری از اطلاعات اضافه از کاربران سایت وردپرسی رو به صورت دائمی در سایتمون ذخیره کنیم. اما خوب نمی تونیم برای هر مورد یک جدول دیتابیس ایجاد کنیم. وردپرس برای حل این مشکل user meta رو ایجاد کرده. ما می تونیم به راحتی با استفاده از توابع موجود تمام اطلاعات اضافی که می خوایم برای کاربر داشته باشیم رو نگهداری کنیم. meta data ها اطلاعات اضافی در مورد کاربران،مطالب و نظرات رو میتونن به راحتی برای ما ذخیره کنن. ما با توابعی مانند update_user_meta و get_user_meta به راحتی به این این اطلاعات اضافه می تونیم دسترسی داشته باشیم. user meta شامل آیدی کاربر یک کلید یکتا و هم چنین مقدار اون کلید هستش یا به روز رسانی میشه یا دریافت میشه و برای هر کاربری بر اساس همون آیدی کاربر یکتا هست. در این جلسه خواهیم دید :

• آشنایی با meta data
• آشنایی با user meta
• معرفی تابع add_user_meta
• استفاده از تابع update_user_meta
• استفاده از نابع get_user_meta
• معرفی تابع delete_user_meta
• آشنایی با WP_User_Query و نحوه دریافت کاربران و فیلتر کردن آنها (دریافت کاربران فعال سایت)

توضیحات : وردپرس به عنوان محبوب ترین سیستم مدیریت محتوا در بین اکثر کاربران فضای مجازی به خوبی شناخته شده است و این موضوع باعث شده تا سیستم های مختلفی برای وردپرس تهیه و به بازار عرضه شود. هر چند وردپرس خود رایگان است اما قابلیت های توسعه آن از جمله قالب ها و پلاگین ها که به کاربران کمک می کند سیستم مورد نظر خود را پیاده سازی کنند، باعث شده است تا رونق بسیار زیادی در بازار فروش قالب ها و پلاگین های آن ایجاد شود. فروش هایی که تا دهها میلیون دلار هم برای یک افزونه می رسد! در این دوره سعی کرده ایم تمامی مواردی که شما برای تهیه یک پلاگین عالی و کاملا حرفه ای نیاز دارد را قرار دهیم و تدریس نماییم. آموزش ها به صورت کاملا پروژه محور و کاربردی تهیه شده است، پلاگین هایی حرفه ای که هم نحوه ایجاد و کدنویسی آنها را یاد خواهید گرفت و هم آنها را در پایان دوره خواهید داشت. شما پس از گذراندن این دوره قادر خواهید بود هر نوع پلاگین دلخواه دیگری را که فکر می کنید برای سایت خود بنویسید. لازم به ذکر است در صورت سفارش پلاگین های طراحی و کدنویسی شده در این دوره، باید هزینه ای حداقل 800 هزارتومانی بپردازید! در صورتی که در این دوره شما فقط با پرداخت هزینه ای اندک، هم پلاگین نویسی حرفه ای خواهید شد و هم این پلاگین ها را در پایان دوره خواهید داشت. تدریس مباحث این دوره نیز به مانند دوره های دیگر سون لرن، بر اساس اصل صداقت در تدریس و جامع بودن دوره هاست و مدرس تمامی تجربیات حرفه ای خود در این زمینه را به شما انتقال خواهد داد! به جرئت می توانیم ادعا کنیم دوره حاضر حرفه ای ترین و استانداردترین دوره پلاگین نویسی وردپرس است که در سطح ایران برگزار می گردد. پس فرصت را از دست ندهید و خود را به یک پلاگین نویس حرفه ای وردپرس تبدیل کنید!

در این مطلب میخوام سایتی رو بهتون معرفی کنم که در اون لیستی از ویدئوهای مفید برای css قرار داده شده و میتونین اونا رو ببینید و با موارد مختلفی که در این زمینه وجود داره آشنا بشید.

برای شروع وارد سایت must-watch-css بشین.

امیدوارم بدردتون بخوره.

موفق باشید.

یا علی

* {

box-sizing: border-box;

padding: 0;

margin: 0;

}

html, body {

min-height: 100%;

height: 100%;

background-image: url(http://theartmad.com/wp-content/uploads/Dark-Grey-Texture-Wallpaper-5.jpg);

background-size: cover;

background-position: top center;

font-family: helvetica neue, helvetica, arial, sans-serif;

font-weight: 200;

}

html.modal-active, body.modal-active {

overflow: hidden;

}

.button {

display: inline-block;

text-align: center;

padding: 10px 15px;

margin: 10px;

background: red;

font-size: 18px;

background-color: #efefef;

border-radius: 3px;

box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);

cursor: pointer;

}

.button:hover {

color: white;

background: #009bd5;

}

#modal-container {

position: fixed;

display: table;

height: 100%;

width: 100%;

top: 0;

left: 0;

transform: scale(0);

z-index: 1;

}

#modal-container .modal-background {

display: table-cell;

background: rgba(0, 0, 0, 0.8);

text-align: center;

vertical-align: middle;

}

#modal-container .modal-background .modal {

background: white;

padding: 50px;

display: inline-block;

border-radius: 3px;

font-weight: 300;

position: relative;

}

#modal-container .modal-background .modal h2 {

font-size: 25px;

line-height: 25px;

margin-bottom: 15px;

}

#modal-container .modal-background .modal p {

font-size: 18px;

line-height: 22px;

}

#modal-container .modal-background .modal .modal-svg {

position: absolute;

top: 0;

left: 0;

height: 100%;

width: 100%;

border-radius: 3px;

}

#modal-container .modal-background .modal .modal-svg rect {

stroke: #fff;

stroke-width: 2px;

stroke-dasharray: 778;

stroke-dashoffset: 778;

}

#modal-container.five {

transform: scale(1);

}

#modal-container.five .modal-background {

background: transparent;

animation: fadeIn 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;

}

#modal-container.five .modal-background .modal {

transform: translateX(-1500px);

animation: roadRuerIn 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;

}

#modal-container.five.out {

animation: quickScaleDown 0s .5s linear forwards;

}

#modal-container.five.out .modal-background {

animation: fadeOut 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;

}

#modal-container.five.out .modal-background .modal {

animation: roadRuerOut 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;

}

@keyframes roadRuerIn {

0% {

transform: translateX(-1500px) skewX(30deg) scaleX(1.3);

}

70% {

transform: translateX(30px) skewX(0deg) scaleX(0.9);

}

100% {

transform: translateX(0px) skewX(0deg) scaleX(1);

}

}

@keyframes roadRuerOut {

0% {

transform: translateX(0px) skewX(0deg) scaleX(1);

}

30% {

transform: translateX(-30px) skewX(-5deg) scaleX(0.9);

}

100% {

transform: translateX(1500px) skewX(30deg) scaleX(1.3);

}

}

@keyframes fadeIn {

0% {

background: transparent;

}

100% {

background: rgba(0, 0, 0, 0.7);

}

}

@keyframes fadeOut {

0% {

background: rgba(0, 0, 0, 0.7);

}

100% {

background: transparent;

}

}

در جلسه بیست و نهم دوره آموزش فریم ورک فاندیشن می پرداریم به پیاده سازی بخش هشتم پروژه نهایی این دوره و آنچه را که آموختیم رو در قالب یک پروژه کاملا کاربردی پیاده سازی خواهیم کرد در این جلسه می پردازیم به : طراحی و سفارشی سازی بخش صفحه بندی طراحی و سفارشی سازی و نحوه استفاده از پلاگین owl slider

توضیحات : امروزه با توجه به پیشرفت سریع تکنولوژی ,مبحث طراحی رسپانسیو و یا به عبارتی واکنشگرا در زمینه وب جز یکی از موارد اجتناب ناپذیر برای طراحان وب می باشد که در کنار چندین فاکتور اساسی و پایه ای دیگر، از مواردی به شمار می رود که نیاز است قبل از هر چیز و شروع پروژه توجه ویژه ای به آن شود و به عنوان یکی از ارکان اصلی پیاده سازی سایت های اینترنتی در بخش UI (رابط کاربری) و همچنین UX (تجربه کاربری) مد نظر قرار گیرد و توجه ویژه ای به آن شود چرا که عدم توجه به آن می تواند منجر به شکست و زیان دهی پروژه گردد. طبق آمار تا پایان سال ۲۰۱۵ بیش از ۹۱ درصد از مردم دنیا دارایی تلفن همراه هستند و و ۶۰ درصد از این جامعه آماری دارای تلفن های هوشمند در مدل های مختلف هستند و از آن برای اتصال به اینترنت و وبگردی استفاده می کنند حال با توجه به طیف وسیعی از کاربرانی که دارای تلفن های هوشمند در ابعاد و اندازه های مختلف هستند طراحان وب ملزم به طراحی UI و رعایت اصول استاندارد UX در طرح های خود می باشند تا کاربران هدف شان که درصد بالایی در جامعه آماری ذکر شده را تشکیل می دهند بتوانند با هر دستگاهی و در هر اندازه ای به راحتی و بدون دردسر و به هم ریختگی در ظاهر و قالب یک سایت آن را مشاهد و مورد کاوش قرار دهند و تجربه لذت بخشی از وبگردی در سایت مورد نظرشان داشته باشند. از این رو و برای راحتی و سرعت بخشیدن به این نوع طراحی (طراحی واکنشگرا) در کنار رعایت استاندارهای لازم، سالانه فریم ورک های مختلفی در این زمینه طراحی و تولید می شوند و به رقابت با سایر رقبای خود در این زمینه می پردازند. به همین دلیل بر آن شدیم تا یکی از فریم ورک های فوق العاده قدرتمند و با سابقه و محبوب در بین طراحان حرفه ای را به صورت اصولی و از پایه تا پیشرفته در قالب مثال های مختلف و متنوع آموزش دهیم. در پایان نیز با کدنویسی 0 تا 100 یک پروژه کاملا حرفه ای و مدرن، به صورت عملی و کاربردی از این فریمورک حرفه ای استفاده خواهیم کرد. لازم به ذکر است که قالب کنونی وب سایت سون لرن هم بر پایه فریم ورک فاندیشن پیاده سازی و طراحی شده است. در این دوره آخرین نسخه فریمورک فاندیشن (نسخه 6) تدریس خواهد شد و شما به روزترین آموزش این فریمورک را در وب فارسی خواهید داشت. امیدواریم این دوره نیز مورد توجه و استقبال علاقمندان قرار گرفته و مفید واقع گردد...

@import url(http://fonts.googleapis.com/css?family=Francois+One);

@import url(http://fonts.googleapis.com/css?family=PT+Sans);

@font-face {

font-family: 'Audiowide';

font-style: normal;

font-weight: 400;

src: local("Audiowide"), local("Audiowide-Regular"), url(http://themes.googleusercontent.com/static/fonts/audiowide/v2/8XtYtNKEyyZh481XVWfVOj8E0i7KZn-EPnyo3HZu7kw.woff) format("woff");

}

body {

font-size: 62.5%;

background-color: #fff;

margin: 10px;

border: 1px solid #333;

}

*,

*::before,

*::after {

box-sizing: border-box;

}

h1, h2, h3 {

font-family: 'PT Sans', sans-serif;

text-transform: uppercase;

}

h1 {

font-size: 2.4em;

background-color: #292929;

text-align: center;

padding: 20px;

margin: 0;

color: #fff;

}

h1 a {

display: block;

margin-top: 10px;

text-transform: none;

color: #aaa;

font-size: 16px;

text-decoration: none;

}

.headingOuter {

background: #f1f1f1;

text-align: center;

margin-top: 50px;

margin-bottom: 0;

padding: 10px;

border-top: 1px solid #333;

border-bottom: 1px solid #333;

font-size: 1.6em;

}

.headingOuter:first-child {

margin-top: 0;

}

h1 + .headingOuter {

margin-top: 0;

}

/* =====================================================

Some defaults across all toggle demos

===================================================== */

.toggle {

display: block;

text-align: center;

margin-top: 40px;

user-select: none;

}

.toggle--checkbox {

display: none;

}

.toggle--btn {

display: block;

margin: 0 auto;

font-size: 1.4em;

transition: all 350ms ease-in;

}

.toggle--btn:hover {

cursor: pointer;

}

.toggle--btn, .toggle--btn:before, .toggle--btn:after,

.toggle--checkbox,

.toggle--checkbox:before,

.toggle--checkbox:after,

.toggle--feature,

.toggle--feature:before,

.toggle--feature:after {

transition: all 250ms ease-in;

}

.toggle--btn:before, .toggle--btn:after,

.toggle--checkbox:before,

.toggle--checkbox:after,

.toggle--feature:before,

.toggle--feature:after {

content: '';

display: block;

}

/* =====================================================

Toggle - knob button style

===================================================== */

.toggle--knob .toggle--btn {

position: relative;

width: 120px;

height: 40px;

font-family: 'PT Sans', Sans Serif;

text-transform: uppercase;

color: #fff;

background: #a4bf4d;

box-shadow: inset 0 20px 40px -10px #7b9d25;

border-radius: 40px;

}

.toggle--knob .toggle--btn:before {

display: block;

position: absolute;

top: 50%;

left: 60%;

transform: translateY(-50%);

width: 48px;

height: 48px;

border-radius: 50%;

background: #f1f1f1;

box-shadow: 0 4px 10px 0 #999, inset 0 10px 10px 8px rgba(241, 241, 241, 0.6), inset 0 0 8px 0px #333, inset 0 0 0 13px #ccc, inset 0 0 0 14px #f1f1f1;

text-indent: -100%;

}

.toggle--knob .toggle--feature {

position: relative;

display: block;

overflow: hidden;

height: 40px;

text-shadow: 0 1px 2px #666;

}

.toggle--knob .toggle--feature:before, .toggle--knob .toggle--feature:after {

position: absolute;

top: 50%;

transform: translateY(-50%);

}

.toggle--knob .toggle--feature:before {

content: attr(data-label-on);

left: 20%;

}

.toggle--knob .toggle--feature:after {

content: attr(data-label-off);

right: -60%;

}

.toggle--knob .toggle--checkbox:checked + .toggle--btn {

background: #a2a2a2;

box-shadow: inset 0 20px 40px -10px #7e7e7e;

}

.toggle--knob .toggle--checkbox:checked + .toggle--btn:before {

left: 0;

}

.toggle--knob .toggle--checkbox:checked + .toggle--btn .toggle--feature:before {

left: -60%;

}

.toggle--knob .toggle--checkbox:checked + .toggle--btn .toggle--feature:after {

right: 20%;

}

در این مطلب میخوام سایتی رو بهتون معرفی کنم که از نظر طراحی بسیار زیبا هست و میتونین از اون ایده های زیادی بگیرید. وقتی که ماوس جابجا میشه حالت زیبایی رو به وجود میاره و همچنین با جابجا شدن بین صفحه ها انیمیشنهای دیدنی نمایش داده میشه. هر کدوم از قسمتهای این سایت نکات زیادی داره و میتونین تک تک اونا رو ببینید و لذت ببرید.

برای شروع وارد سایت activetheory بشین.

امیدوارم بدردتون بخوره.

موفق باشید.

یا علی

<html>

<head>

<title>Highcharts Tutorial</title>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<script src="http://code.highcharts.com/highcharts.js"></script>

</head>

<body>

<div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div>

<script language="JavaScript">

$(document).ready(function() {

var title = {

text: 'Combination chart'

};

var xAxis = {

categories: ['Apples', 'Oranges', 'Pears', 'Bananas', 'Plums']

};

var labels = {

items: [{

html: 'Total fruit consumption',

style: {

left: '50px',

top: '18px',

color: (Highcharts.theme && Highcharts.theme.textColor) || 'black'

}

}]

};

var series = [{

type: 'column',

name: 'Jane',

data: [3, 2, 1, 3, 4]

}, {

type: 'column',

name: 'John',

data: [2, 3, 5, 7, 6]

}, {

type: 'column',

name: 'Joe',

data: [4, 3, 3, 9, 0]

}, {

type: 'spline',

name: 'Average',

data: [3, 2.67, 3, 6.33, 3.33],

marker: {

lineWidth: 2,

lineColor: Highcharts.getOptions().colors[3],

fillColor: 'white'

}

}, {

type: 'pie',

name: 'Total consumption',

data: [{

name: 'Jane',

y: 13,

color: Highcharts.getOptions().colors[0] // Jane's color

}, {

name: 'John',

y: 23,

color: Highcharts.getOptions().colors[1] // John's color

}, {

name: 'Joe',

y: 19,

color: Highcharts.getOptions().colors[2] // Joe's color

}],

center: [100, 80],

size: 100,

showInLegend: false,

dataLabels: {

enabled: false

}

}];

var json = {};

json.title = title;

json.xAxis = xAxis;

json.labels = labels;

json.series = series;

$('#container').highcharts(json);

});

</script>

</body>

</html>

به نام خدا و سلام . یکی از مسائل اصلی پلاگین های وردپرس ارسال ایمیل هایی با فرمت html هستش که در بسیاری از افزونه های حرفه ای این ویژگی وجود داره. در این جلسه از دوره مجازی پلاگین نویسی قصد داریم تا در بخش اطلاع رسانی پلاگین آمار بازدید کاربران این مورد رو با استفاده از wp_mail کاملا پیاده سازی کنیم. هم چنین برای تابع wp_schedule_event بازه های زمانی جدیدی تعریف می کنیم. این کار را با استفاده از فیلتر های مناسب خود وردپرس انجام خواهیم داد تا کاربران نهایی به راحتی بتوانند زمان بندی ارسال پیام ها را سفارشی کنند. هم چنین تابع wp_mail را کاملا بررسی خواهیم کرد و در انتها ترفند هایی برای دریافت محتوای html و قرار دادن آن به عنوان محتوای ایمیل را آموزش خواهیم داد. در این جلسه خواهیم دید :

• مقدمات ارسال ایمیل های html
• استفاده از تابع wp_mail
• ایجاد قالب ایمیل با فرمت html
• ایجاد بازه های زمانی دلخواه و اعمال آن ها

توضیحات : وردپرس به عنوان محبوب ترین سیستم مدیریت محتوا در بین اکثر کاربران فضای مجازی به خوبی شناخته شده است و این موضوع باعث شده تا سیستم های مختلفی برای وردپرس تهیه و به بازار عرضه شود. هر چند وردپرس خود رایگان است اما قابلیت های توسعه آن از جمله قالب ها و پلاگین ها که به کاربران کمک می کند سیستم مورد نظر خود را پیاده سازی کنند، باعث شده است تا رونق بسیار زیادی در بازار فروش قالب ها و پلاگین های آن ایجاد شود. فروش هایی که تا دهها میلیون دلار هم برای یک افزونه می رسد! در این دوره سعی کرده ایم تمامی مواردی که شما برای تهیه یک پلاگین عالی و کاملا حرفه ای نیاز دارد را قرار دهیم و تدریس نماییم. آموزش ها به صورت کاملا پروژه محور و کاربردی تهیه شده است، پلاگین هایی حرفه ای که هم نحوه ایجاد و کدنویسی آنها را یاد خواهید گرفت و هم آنها را در پایان دوره خواهید داشت. شما پس از گذراندن این دوره قادر خواهید بود هر نوع پلاگین دلخواه دیگری را که فکر می کنید برای سایت خود بنویسید. لازم به ذکر است در صورت سفارش پلاگین های طراحی و کدنویسی شده در این دوره، باید هزینه ای حداقل 800 هزارتومانی بپردازید! در صورتی که در این دوره شما فقط با پرداخت هزینه ای اندک، هم پلاگین نویسی حرفه ای خواهید شد و هم این پلاگین ها را در پایان دوره خواهید داشت. تدریس مباحث این دوره نیز به مانند دوره های دیگر سون لرن، بر اساس اصل صداقت در تدریس و جامع بودن دوره هاست و مدرس تمامی تجربیات حرفه ای خود در این زمینه را به شما انتقال خواهد داد! به جرئت می توانیم ادعا کنیم دوره حاضر حرفه ای ترین و استانداردترین دوره پلاگین نویسی وردپرس است که در سطح ایران برگزار می گردد. پس فرصت را از دست ندهید و خود را به یک پلاگین نویس حرفه ای وردپرس تبدیل کنید!

در این مطلب میخوام سایتی رو بهتون معرفی کنم که در اون میتونین با استفاده از محیط ساده ای که براتون قرار داده شده، آهنگهای مورد نظر خودتون رو بسازید. با کلیک بر روی هر کدوم یک صدا ایجاد میشه و اصلش اینه که با استفاده از کیبورد این صداها رو بوجود بیارید. با کلیک بر روی هر دکمه کیبورد، صدای متناظر با اون پخش میشه. حالا اگه بخواین یک سری صدا رو پشت سر هم قرار بدین تا یک آهنگ درست بشه، باید کلیک Shift رو فشار بدین تا وارد محیط ضبط بشید و بعد از اون هر دکمه ای که کلیک کنید رو ضبط میکنه و در پایان مجددا بر روی Shift کلیک کنید تا ضبط به پایان برسه. بعد از اون میتونین صداها رو جابجا و حذف و ... کنید. در نهایت هم میتونین برای آهنگی که ساختید اسم بزارید و اونو ذخیره کنید. یک نمونه آهنگ که با این ابزار ساخته شده رو در اینجا ببینید. برای پخش شدن آهنگ بر روی دکمه play که آیکون مثلثی شکل هست کلیک کنید.

برای شروع وارد سایت sampulator بشین.

امیدوارم بدردتون بخوره.

موفق باشید.

یا علی

* {

box-sizing: border-box;

padding: 0;

margin: 0;

}

html, body {

min-height: 100%;

height: 100%;

background-image: url(http://theartmad.com/wp-content/uploads/Dark-Grey-Texture-Wallpaper-5.jpg);

background-size: cover;

background-position: top center;

font-family: helvetica neue, helvetica, arial, sans-serif;

font-weight: 200;

}

html.modal-active, body.modal-active {

overflow: hidden;

}

.button {

display: inline-block;

text-align: center;

padding: 10px 15px;

margin: 10px;

background: red;

font-size: 18px;

background-color: #efefef;

border-radius: 3px;

box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);

cursor: pointer;

}

.button:hover {

color: white;

background: #009bd5;

}

#modal-container {

position: fixed;

display: table;

height: 100%;

width: 100%;

top: 0;

left: 0;

transform: scale(0);

z-index: 1;

}

#modal-container .modal-background {

display: table-cell;

background: rgba(0, 0, 0, 0.8);

text-align: center;

vertical-align: middle;

}

#modal-container .modal-background .modal {

background: white;

padding: 50px;

display: inline-block;

border-radius: 3px;

font-weight: 300;

position: relative;

}

#modal-container .modal-background .modal h2 {

font-size: 25px;

line-height: 25px;

margin-bottom: 15px;

}

#modal-container .modal-background .modal p {

font-size: 18px;

line-height: 22px;

}

#modal-container .modal-background .modal .modal-svg {

position: absolute;

top: 0;

left: 0;

height: 100%;

width: 100%;

border-radius: 3px;

}

#modal-container .modal-background .modal .modal-svg rect {

stroke: #fff;

stroke-width: 2px;

stroke-dasharray: 778;

stroke-dashoffset: 778;

}

#modal-container.four {

z-index: 0;

transform: scale(1);

}

#modal-container.four .modal-background {

background: rgba(0, 0, 0, 0.7);

}

#modal-container.four .modal-background .modal {

animation: blowUpModal 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;

}

#modal-container.four + .content {

z-index: 1;

animation: blowUpContent 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;

}

#modal-container.four.out .modal-background .modal {

animation: blowUpModalTwo 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;

}

#modal-container.four.out + .content {

animation: blowUpContentTwo 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;

}

@keyframes blowUpModal {

0% {

transform: scale(0);

}

100% {

transform: scale(1);

}

}

@keyframes blowUpModalTwo {

0% {

transform: scale(1);

opacity: 1;

}

100% {

transform: scale(0);

opacity: 0;

}

}

@keyframes blowUpContent {

0% {

transform: scale(1);

opacity: 1;

}

99.9% {

transform: scale(2);

opacity: 0;

}

100% {

transform: scale(0);

}

}

@keyframes blowUpContentTwo {

0% {

transform: scale(2);

opacity: 0;

}

100% {

transform: scale(1);

opacity: 1;

}

}

در این مطلب میخوام سایتی رو بهتون معرفی کنم که در اون آموزش مقدماتی و خوبی برای Web Streams API قرار داده شده و میتونین از اون بهره ببرید و از مزیتاش استفاده کنید. همونطور که در تصویر پایین میبینید دو حالت وجود داره. اولی Without Streaming هست و همون حالت عادی خودمون هست. در این حالت ابتدا باید کل اون چیزی که میخاد نمایش داده بشه از سرور گرفته یا fetch بشه و بعد از اون بر روش تجزیه و تحلیل صورت بگیره و بعد از اون رندر بشه و نمایش داده بشه و کاربر باید منتظر به پایان رسیدن این عملیات باشه و طول میکشه. حالت دوم With Streaming هست و در این حالت از Streams API استفاده میکنیم. میبینید که اون چیزی که قراره از سرور دریافت بشه، بصورت تکه تکه دریافت میشه و همزمان بر روی اون تجزیه و تحلیل صورت میگیره و نتیجه اون به کاربر نمایش داده میشه. اینجوری کاربر از همون ابتدا یه قسمتایی رو میبینه و لازم نیس تا انتها با صفحه خالی مواجه باشه. این API مزیت های دیگه ای هم داره که خودتون میتونید در این آموزش اونا رو مطالعه کنید.

برای شروع وارد سایت streams بشین.

امیدوارم بدردتون بخوره.

موفق باشید.

یا علی

در این مطلب میخوام سایتی رو بهتون معرفی کنم که در اون یک فونت زیبا و حرفه ای قرار داده شده و میتونین اون رو دانلود کرده و در طراحیای خودتون ازش استفاده کنید. این فونت در 6 وزن یا weight قرار داده شده و میتونین با کلیک بر روی دکمه سبز رنگ Download در پایین صفحه، فونت مورد نظر رو دانلود کنید. این فونت در فرمت OTF هست.

برای شروع وارد سایت fibon-sans بشین.

امیدوارم بدردتون بخوره.

موفق باشید.

یا علی

@import url(http://fonts.googleapis.com/css?family=Francois+One);

@import url(http://fonts.googleapis.com/css?family=PT+Sans);

@font-face {

font-family: 'Audiowide';

font-style: normal;

font-weight: 400;

src: local("Audiowide"), local("Audiowide-Regular"), url(http://themes.googleusercontent.com/static/fonts/audiowide/v2/8XtYtNKEyyZh481XVWfVOj8E0i7KZn-EPnyo3HZu7kw.woff) format("woff");

}

body {

font-size: 62.5%;

background-color: #fff;

margin: 10px;

border: 1px solid #333;

}

*,

*::before,

*::after {

box-sizing: border-box;

}

h1, h2, h3 {

font-family: 'PT Sans', sans-serif;

text-transform: uppercase;

}

h1 {

font-size: 2.4em;

background-color: #292929;

text-align: center;

padding: 20px;

margin: 0;

color: #fff;

}

h1 a {

display: block;

margin-top: 10px;

text-transform: none;

color: #aaa;

font-size: 16px;

text-decoration: none;

}

.headingOuter {

background: #f1f1f1;

text-align: center;

margin-top: 50px;

margin-bottom: 0;

padding: 10px;

border-top: 1px solid #333;

border-bottom: 1px solid #333;

font-size: 1.6em;

}

.headingOuter:first-child {

margin-top: 0;

}

h1 + .headingOuter {

margin-top: 0;

}

/* =====================================================

Some defaults across all toggle demos

===================================================== */

.toggle {

display: block;

text-align: center;

margin-top: 40px;

user-select: none;

}

.toggle--checkbox {

display: none;

}

.toggle--btn {

display: block;

margin: 0 auto;

font-size: 1.4em;

transition: all 350ms ease-in;

}

.toggle--btn:hover {

cursor: pointer;

}

.toggle--btn, .toggle--btn:before, .toggle--btn:after,

.toggle--checkbox,

.toggle--checkbox:before,

.toggle--checkbox:after,

.toggle--feature,

.toggle--feature:before,

.toggle--feature:after {

transition: all 250ms ease-in;

}

.toggle--btn:before, .toggle--btn:after,

.toggle--checkbox:before,

.toggle--checkbox:after,

.toggle--feature:before,

.toggle--feature:after {

content: '';

display: block;

}

/* ======================================================

Push button toggle

====================================================== */

.toggle--push .toggle--btn {

position: relative;

width: 50px;

height: 50px;

background-color: #f9f8f6;

border-radius: 50%;

box-shadow: 0 5px 10px 0px #333, 0 15px 20px 0px #cccccc;

}

.toggle--push .toggle--btn, .toggle--push .toggle--btn:before, .toggle--push .toggle--btn:after {

transition-duration: 150ms;

}

.toggle--push .toggle--btn:before {

position: absolute;

left: 50%;

top: 50%;

transform: translate(-50%, -50%);

width: 22.72727px;

height: 22.72727px;

border-radius: 50%;

background-color: #FF9900;

box-shadow: inset 0 0 0 5px #ccc, inset 0 0 0 14px #f9f8f6;

}

.toggle--push .toggle--btn:after {

position: absolute;

left: 50%;

top: 35%;

transform: translate(-50%, -50%);

width: 4px;

height: 12px;

background-color: #ccc;

box-shadow: 0 0 0 2.5px #f9f8f6;

}

.toggle--push .toggle--btn:hover:before {

box-shadow: inset 0 0 0 5px #b3b3b3, inset 0 0 0 14px #f9f8f6;

}

.toggle--push .toggle--btn:hover:after {

background-color: #b3b3b3;

}

.toggle--push .toggle--checkbox:checked + .toggle--btn {

box-shadow: 0 2px 5px 0px gray, 0 15px 20px 0px transparent;

}

.toggle--push .toggle--checkbox:checked + .toggle--btn:before {

box-shadow: inset 0 0 0 5px #FF9900, inset 0 0 0 14px #f9f8f6;

}

.toggle--push .toggle--checkbox:checked + .toggle--btn:after {

background-color: #FF9900;

}

.toggle--push--glow {

background: #111;

padding: 50px 0;

margin-bottom: -50px;

}

.toggle--push--glow .toggle--btn {

background-color: #dfdfdf;

box-shadow: 0 5px 10px 0px #333, 0 0 0 3px #444444, 0 0 8px 2px transparent, 0 0 0 6px #919191;

}

.toggle--push--glow .toggle--btn:before {

box-shadow: inset 0 0 0 5px #aaa, inset 0 0 0 14px #dfdfdf;

}

.toggle--push--glow .toggle--btn:after {

background-color: #aaa;

box-shadow: 0 0 0 2.5px #dfdfdf;

}

.toggle--push--glow .toggle--btn:hover:before {

box-shadow: inset 0 0 0 5px #777777, inset 0 0 0 14px #dfdfdf;

}

.toggle--push--glow .toggle--btn:hover:after {

background-color: #777777;

}

.toggle--push--glow .toggle--checkbox:checked + .toggle--btn {

box-shadow: 0 0px 8px 0 #0072ad, 0 0 0 3px #0094e0, 0 0 30px 0 #0094e0, 0 0 0 6px #777777;

}

.toggle--push--glow .toggle--checkbox:checked + .toggle--btn:before {

box-shadow: inset 0 0 0 5px #0094e0, inset 0 0 0 14px #dfdfdf;

}

.toggle--push--glow .toggle--checkbox:checked + .toggle--btn:after {

background-color: #0094e0;

}

در این مطلب میخوام سایتی رو بهتون معرفی کنم که در اون بصورت مرحله به مرحله آموزش داده شده که چطور لودینگهای زیبایی رو با استفاده از SVG و Segment درست کنیم و با استفاده از مسیرهای مختلف، رفتار اونا رو تعریف کرده و حالت زیبایی رو به وجود بیاریم. لودینگها در استایلهای مختلفی قرار داده شدن و به دو شکل نهایی Success و Error تغییر شکل پیدا میکنن. میتونین از این کدها ایده گرفته و از اونا در سایتتون استفاده کنید.

برای شروع وارد سایت loading بشین.

امیدوارم بدردتون بخوره.

موفق باشید.

یا علی

@import url(http://fonts.googleapis.com/css?family=Francois+One);

@import url(http://fonts.googleapis.com/css?family=PT+Sans);

@font-face {

font-family: 'Audiowide';

font-style: normal;

font-weight: 400;

src: local("Audiowide"), local("Audiowide-Regular"), url(http://themes.googleusercontent.com/static/fonts/audiowide/v2/8XtYtNKEyyZh481XVWfVOj8E0i7KZn-EPnyo3HZu7kw.woff) format("woff");

}

body {

font-size: 62.5%;

background-color: #fff;

margin: 10px;

border: 1px solid #333;

}

*,

*::before,

*::after {

box-sizing: border-box;

}

h1, h2, h3 {

font-family: 'PT Sans', sans-serif;

text-transform: uppercase;

}

h1 {

font-size: 2.4em;

background-color: #292929;

text-align: center;

padding: 20px;

margin: 0;

color: #fff;

}

h1 a {

display: block;

margin-top: 10px;

text-transform: none;

color: #aaa;

font-size: 16px;

text-decoration: none;

}

.headingOuter {

background: #f1f1f1;

text-align: center;

margin-top: 50px;

margin-bottom: 0;

padding: 10px;

border-top: 1px solid #333;

border-bottom: 1px solid #333;

font-size: 1.6em;

}

.headingOuter:first-child {

margin-top: 0;

}

h1 + .headingOuter {

margin-top: 0;

}

/* =====================================================

Some defaults across all toggle demos

===================================================== */

.toggle {

display: block;

text-align: center;

margin-top: 40px;

user-select: none;

}

.toggle--checkbox {

display: none;

}

.toggle--btn {

display: block;

margin: 0 auto;

font-size: 1.4em;

transition: all 350ms ease-in;

}

.toggle--btn:hover {

cursor: pointer;

}

.toggle--btn, .toggle--btn:before, .toggle--btn:after,

.toggle--checkbox,

.toggle--checkbox:before,

.toggle--checkbox:after,

.toggle--feature,

.toggle--feature:before,

.toggle--feature:after {

transition: all 250ms ease-in;

}

.toggle--btn:before, .toggle--btn:after,

.toggle--checkbox:before,

.toggle--checkbox:after,

.toggle--feature:before,

.toggle--feature:after {

content: '';

display: block;

}

/* ====================================================

Text toggle button

==================================================== */

.toggle--text .toggle--btn {

position: relative;

width: 180px;

height: 70px;

font-family: 'PT Sans', Sans Serif;

text-transform: uppercase;

font-weight: bold;

border-radius: 40px;

border: 1px solid #8c8c8c;

border-right: 2px solid #8c8c8c;

box-shadow: inset 90px 0 10px rgba(255, 255, 255, 0.6), inset -3px 3px 18px -2px #8c8c8c, 0 0 15px #ccc, 0px -5px 16px 1px #ddd, -5px -5px 16px 1px #ddd, 5px -5px 16px 1px #ddd, -5px -5px 16px 1px #ddd, 5px -5px 16px 1px #ddd, 17px 9px 0 -5px rgba(255, 255, 255, 0.6), -3px 6px 12px -7px #000, 0 0 0 14px #fff, 0 0 0 15px #999;

}

.toggle--text .toggle--btn:before, .toggle--text .toggle--btn:after {

position: absolute;

top: 50%;

transform: translateY(-50%);

}

.toggle--text .toggle--btn:before {

content: attr(data-label-on);

left: 15%;

color: #999;

}

.toggle--text .toggle--btn:after {

content: attr(data-label-off);

right: 15%;

color: #db4c00;

}

.toggle--text .toggle--checkbox:checked + .toggle--btn {

border-left: 2px solid #8c8c8c;

border-right: 1px solid #8c8c8c;

box-shadow: inset 90px 0 10px rgba(255, 255, 255, 0), inset 3px 3px 18px -2px #8c8c8c, 0 0 15px #ccc, 0px -5px 16px 1px #ddd, -5px -5px 16px 1px #ddd, 5px -5px 16px 1px #ddd, -5px -5px 16px 1px #ddd, 5px -5px 16px 1px #ddd, -17px 9px 0 -5px rgba(255, 255, 255, 0.6), 3px 6px 12px -7px #000, 0 0 0 14px #fff, 0 0 0 15px #999;

}

.toggle--text .toggle--checkbox:checked + .toggle--btn:before {

color: #db4c00;

}

.toggle--text .toggle--checkbox:checked + .toggle--btn:after {

color: #999;

}